<template>
  <md-nav-bar title="商品详情"></md-nav-bar>
  <view class="goods-detail-page">
    <!-- 商品卡片 -->
    <view class="goods-item">
      <image class="goods-img" :src="data.goodDetail.imageUrl" mode="aspectFill" />
      <view class="goods-detail">
        <view class="goods-info-container">
          <view class="goods-info">
            <view class="goods-title">{{ data.goodDetail.title }}</view>
            <view class="goods-type">{{ subType(data.goodDetail.type) }}</view>
            <view class="goods-status">{{ goodsStatus(data.goodDetail.status) }}</view>
          </view>
          <view class="goods-price">￥{{ formatUnitCentToYuan(data.goodDetail.price, 2) }}</view>
        </view>
      </view>
    </view>

    <!-- 商品信息 -->
    <view class="section">
      <view class="section-title">商品信息</view>
      <view class="section-content">
        <text>
          {{ data.goodDetail.description }}
        </text>
      </view>
      <view class="play-block">
        <md-audio v-if="data.goodDetail.musicUrl" hidetime :src="data.goodDetail.musicUrl" v-model:play="data.audioPlay">
          <image class="play-icon" @click="onPlayAudio" :src="data.audioPlay ? 'https://cdn.xmxiaomai.com/isong_static/music/%E6%9A%82%E5%81%9C.png' : 'https://cdn.xmxiaomai.com/isong_static/music/Group%2014.png'" />
        </md-audio>
      </view>
    </view>

    <!-- 订单信息 -->
    <view v-if="data.goodDetail?.orderId" class="section order-section" @click="onToOrderDetail">
      <view class="section-title flex-between">
        订单信息
        <uni-icons type="right" size="18" class="arrow-icon" />
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="foot-btn">
      <view class="btn-group">
        <button v-if="data.goodDetail.status === 0" class="btn" @click="onEdit">修改</button>
        <button v-if="data.goodDetail.status === 0" class="btn" @click="onOnShelf">上架</button>
        <button v-if="data.goodDetail.status === 1" class="btn" @click="onOffShelf">下架修改</button>
        <button v-if="data.goodDetail.status === 0" class="btn" @click="onDelete">删除</button>
      </view>
    </view>
    
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import { formatUnitCentToYuan, subType, goodsStatus,Toast } from '@/utils/util';
import api from '@/api/index';
import type { User } from '@/api/data';
const data = reactive({
  goodDetail: {} as User.Order.Product
})
// 跳转订单详情
const onToOrderDetail = () => {
  uni.navigateTo({
    url: '/pages/sub/my/myOrderDetail?orderId='+(data.goodDetail?.orderId || '')
  });
}
function onEdit() {
  uni.navigateTo({
    url: '/pages/sub/my/addGoods?spuId='+(data.goodDetail?.spuId || '')+'&skuId='+(data.goodDetail?.skuId || '')
  });
}
// 下架
async function onOffShelf() {
  try {
    const res = await api.Order.productUpdate({
      spuId: data.goodDetail.spuId,
      skuId: data.goodDetail.skuId,
      status: 0
    });
    if(res.code === 0) {
      Toast('下架成功');
      await fetchGetGoodsinfo(data.goodDetail)
    }
  } catch (error) {}
}
// 上架
async function onOnShelf() {
  try {
    const res = await api.Order.productUpdate({
      spuId: data.goodDetail.spuId,
      skuId: data.goodDetail.skuId,
      status: 1
    });
    if(res.code === 0) {
      Toast('上架成功');
      await fetchGetGoodsinfo(data.goodDetail)
    }
  } catch (error) {}
}
// 删除
async function onDelete() {
  uni.showModal({
    title: '提示',
    content: '是否确认删除该商品？',
    success: async (res) => {
      if (res.confirm) {
        try {
          const res = await api.Order.productDelete({
            spuId: data.goodDetail.spuId,
            skuId: data.goodDetail.skuId,
          });
          if(res.code === 0) {
            Toast('删除成功');
            uni.navigateTo({
              url: '/pages/sub/my/myShop'
            });
          }
        } catch (error) {}
      }
    },
  });
}
// 获取商品详情
const fetchGetGoodsinfo = async (obj: any) => {
  try {
    const res = await api.Order.productDetail({
      spuId: obj.spuId,
      skuId: obj.skuId
    })
    data.goodDetail = Object.assign(data.goodDetail, res.data, {
      spuId: obj.spuId,
      skuId: obj.skuId
    });
  } catch (e) {}
};
onLoad((options: any) => {
  fetchGetGoodsinfo(options)
});
</script>

<style scoped>
.goods-detail-page {
  background: #f7f7f7;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

.section {
  background: #fff;
  margin-top: 24rpx;
  padding: 24rpx;
  border-radius: 12rpx;
  position: relative;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
  display: flex;
  align-items: center;
}
.arrow-icon {
  margin-left: 8rpx;
  color: #bbb;
}
.section-content {
  color: #333;
  font-size: 28rpx;
  line-height: 1.8;
  min-height: 200rpx;
}
.order-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.foot-btn {
  position: fixed;
  bottom: 100rpx;
  left: 0;
  height: 100rpx;
  background-color: #ffffff;
  right: 0;
  padding: 24rpx;
}
.btn-group {
  display: flex;
  justify-content: space-between;
}
.btn {
  flex: 1;
  margin: 0 8rpx;
  background: #fff;
  color: #222;
  font-size: 30rpx;
  border-radius: 8rpx;
  border: 1rpx solid #ddd;
  height: 80rpx;
  line-height: 80rpx;
}
.flex-between {
  justify-content: space-between;
  width: 100%;
  margin: 0;
}
.goods-item {
  display: flex;
  background: #fff;
  border-radius: 0;
  border-bottom: 1rpx solid #f0f0f0;
  padding: 28rpx 26rpx 30rpx 20rpx;
  position: relative;
}
.goods-index {
  width: 48rpx;
  text-align: center;
  color: #545353;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 41rpx;
  margin-right: 24rpx;
}
.goods-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 20rpx;
  background: #eee;
  margin-right: 24rpx;
  flex-shrink: 0;
}
.goods-detail {
  flex: 1;
}
.goods-info-container {
  display: flex;
  justify-content: space-between;
}
.goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.goods-title {
  font-size: 30rpx;
  color: #222;
  font-weight: 500;
  margin-bottom: 8rpx;
  width: 320rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.goods-type {
  font-size: 28rpx;
  color: #555;
  margin-bottom: 8rpx;
}
.goods-status {
  font-size: 24rpx;
  color: #545353;
}
.goods-price {
  color: #FF7900;
  font-size: 40rpx;
  font-weight: bold;
  margin-left: 12rpx;
  min-width: 120rpx;
  text-align: right;
}
.play-block {
  position: absolute;
  right: 10rpx;
  top: 20rpx;
}
</style>